<template>
	<div class="toast">
		<div class="mask"></div>
		<div class="toast-bd" :class="{'big-toast': toast.text && toast.text.length > 6}">
			<img src="../assets/img/ic/fail_toast@2x.png" alt="" class="toast-status" v-if="!toast.type">
			<img src="../assets/img/ic/successl_toast@2x.png" alt="" class="toast-status" v-if="toast.type">
			<p class="toast-text">
				{{toast.text}}
			</p>
		</div>
	</div>
</template>


<script>
	export default {
		computed: {
			toast() {
				return this.$store.getters.getToast;
			}
		},
		created() {
			this.$store.commit('hideLoading');
		},
		methods: {
			hideToast() {
				let self = this;
				setTimeout(function(){
					self.$store.commit('hideToast');
				}, this.toast.duration)
			}
		},
		mounted() {
			this.hideToast();
		}
	}
</script>

<style lang="less" scoped>
	.mask {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 1000;
		background-color: #333;
		opacity: .7;
	}
	.toast-bd {
		display: inline-block;
		position: fixed;
		left: 50%;
		top: 50%;
		max-width: 80%;
		width: 240px;
		height: 120px;
		transform: translate(-50%, -50%);
		background: #fff;
		border-radius: 10px;
		z-index: 5000;
		padding: 12px;
		display: flex;
		flex-direction: column;
		&.big-toast {
			width: 300px;
			height: 140px;
			padding: 10px 20px;
		}
		.toast-text {
			text-align: center;
			color: #333;
			font-size: 15px;
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}
		.toast-status {
			display: block;
			width: 60px;
			height: 60px;
			margin: 0 auto 5px auto;
		}
	}
</style>